<template>
  <div class="page-container">
    <page_breadcrumb :getKeyMethod="init_table_model" @change="change_table_model" pageOption />
    <ex_super_table_page v-bind="option" ref="SuperTablePage" @selection-change="e => selection = e"
      @select="selectChange" @search="searchChange">

    </ex_super_table_page>

  </div>
</template>
<script>
import moment from 'moment-mini-ts'

import superTablePageFunction from '@/mixin/super-table-page-function';
import emitOnFunction from '@/mixin/emit-on-function';

import page_table_model_manage from '@/mixin/page_table_model_manage';
let emitKey = 'platformSync>order_list_wb'

export default {
  title: 'label_wb_order_list',
  mixins: [superTablePageFunction, emitOnFunction(emitKey), page_table_model_manage],
  components: {},
  data() {
    return {
      orderData: {
        waitSubmitCount: null,
        completeSubmitCount: null,
        submitFailCount: null,
        exceptionCount: null,
        canceledCount: null,
      },
      status_map: {
        "WAIT_SUBMIT": 'waitSubmitCount',
        'COMPLETE_SUBMIT': 'completeSubmitCount',
        "SUBMIT_FAIL": 'submitFailCount',
        "EXCEPTION": 'exceptionCount',
        "CANCELED": 'canceledCount',
      },
      selection: [],
      tableData: [],
      option: {
        search: {
          default: { orderStatus: "WAIT_SUBMIT" },
          resetFieldFun: (def, org) => {def.orderStatus = org.orderStatus;return def},

          model: [
            {
              key: 'orderStatus', label: 'label_status', itemClass: "w_fill",
              render: (h, { data }) => {
                let enums = this.$enumOptions['SrmOrderStatusEnum'] || []
                const list = enums.filter(it => !['DRAFT', 'SUBMIT_FAIL', 'EXCEPTION'].includes(it))
                  .map(it => (
                    <el-radio-button key={it} label={it}>
                      {this.$enumShow(it, 'SrmOrderStatusEnum')}
                      {/* {this.status_map[it] && this.orderData[this.status_map[it]] ? `(${this.orderData[this.status_map[it]]})` : "(0)"} */}
                    </el-radio-button>
                  ))
                return (<el-radio-group value={data.orderStatus}
                  onInput={e => {
                    this.$set(data, 'orderStatus', e)
                    this.$refs.SuperTablePage.loadDataForSearch()
                  }}>
                  {/* <el-radio-button key="" label="">
                    {this.$tt("label_all")}
                  </el-radio-button> */}
                  {list}
                </el-radio-group>
                )
              }
            },
            { key: 'platformOrderNo', label: 'label_platform_code', },
     
            { key: 'supplyId', label: 'label_supply_good_order_code', },
            { key: 'clientId', label: 'label_platform_store', },
            { key: 'trackNumber', label: 'label_track_code', },
            { key: 'omsOrderNo', label: 'label_outbound_code', },

            { key: 'validateFlag', label: 'label_verification_pass', type: 'select', enum: "YesOrNoEnum" },

            { key: 'startSyncTime', label: 'label_start_sync_time', type: 'date-picker', attrs: { type: "datetime", 'default-time': '00:00:00' } },
            { key: 'endSyncTime', label: 'label_end_sync_time', type: 'date-picker', attrs: { type: "datetime", 'default-time': '23:59:59' } },
          ],
        },


        table: {
          url: "/srm-api/ozon/WbOrderRpc/selectListPage.json",
          attrs: {
            'cell-class-name': this.cellClassName, 'span-method': this.objectSpanMethod, 'highlight-current-row': false,
            'row-key': 'id',
          },
          urlDataHandle: this.dataHandle,
          model: this.init_table_model(),
        },
      },



    };
  },
  methods: {
    selectChange(selection, row) {
      const check = selection.includes(row)
      this.$nextTick(() => {
        this.tableData.filter(it => it.supplyId == row.supplyId).forEach(it => {
          this.$refs.SuperTablePage.toggleRowSelection(it, check)
        })
      })


    },
    option_table_model() {
      return [
        { type: 'selection', keyGroup: 'label_table_operate' },
        {
          type: 'expandDesc', 'width': 100,
          expandDesc: {
            ...this.$defaultDescAttrs,
            model: [],
          },
        },
        { key: 'omsOrderNo', label: 'label_outbound_code','width': 140,  },
        { key: 'supplyId', label: 'label_supply_good_order_code', 'show-overflow-tooltip': true, },
        { key: 'wbId', label: 'label_platform_code', 'show-overflow-tooltip': true, },

        { key: 'clientId', label: 'label_platform_store', 'width': 110, 'show-overflow-tooltip': true, },

        {
          key: 'sellerCustomerName', label: 'label_customer_info', 'width': 110, 'show-overflow-tooltip': true,
          formatter: (r, c, v, i) => this.$formatNameCode(v, r.sellerCustomerCode)
        },

        { key: 'trackNumber', label: 'label_track_code', 'width': 110, 'show-overflow-tooltip': true, },
        {
          key: 'orderStatus', label: 'label_status', 'show-overflow-tooltip': true,
          formatter: (r, c, v, i) => this.$enumShow(v, 'SrmOrderStatusEnum')
        },
        {
          key: 'skus', label: 'label_sku_count', 'width': 110, 'show-overflow-tooltip': true,
          formatter: (r, c, v, i) => v ? v.split(',').length : 0,
        },
        { key: 'wbWarehouseId', label: 'label_warehouse_id', 'width': 110, 'show-overflow-tooltip': true, },

        { key: 'gmtCreate', label: 'label_sync_time', width: 140, formatter: (r, c, v, i) => this.$dateFormat(v) },

        {
          key: 'cancelTime', label: 'label_cancel_time', if: () => ["CANCELED"].includes(this.getSearchData().orderStatus),
          width: 140, formatter: (r, c, v, i) => this.$dateFormat(v)
        },



        { key: 'validateFlag', label: 'label_verification_pass', 'width': 110, formatter: (r, c, v, i) => this.$enumShow(v, 'YesOrNoEnum') },

        {
          key: 'exceptionMsg', label: 'label_exception_info', 'width': 120,
          render: (h, { row, column }) => {
            const code = row[column.property]
            if (!code) return ""
            return (<text_extra_tooltip_operate
              value={code} ellipsis
              data_type={column.property} data_id={row.id}
            />)
          },
        },
        { key: 'createdAt', label: 'label_create_time', 'width': 130, 
        formatter: (r, c, v, i) => moment(v).format('YYYY-MM-DD HH:ss')
        
      },

        {
          type: 'operate', width: 220,
          fixed: 'right',
          operate: [

            { label: 'label_view_detail', click: (row) => this.clickDetail(row) },
          ]
        }
      ]
    },
    cellClassName({ row, column, rowIndex, columnIndex }) {
      if (['supplyId'].includes(column.property)) {
        if (row.typeIndex % 2 == 0) {
          return 'back_primary_light back_primary_light_hover'
        } else {
          return 'back_warning_light back_warning_light_hover'
        }
        // return 'tableCell_noHoverLight'
      } else if (['validateFlag'].includes(column.property)) {
        if (row.validateFlag == 'N') {
          return 'color_danger'
        } else {
          return 'color_success'
        }
        // return 'tableCell_noHoverLight'
      }
    },
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (['supplyId'].includes(column.property)) {
        // return { rowspan: row.rowspan, colspan: 1 }
      }
    },
    dataHandle(res) {
      const _list = res.data.rows
      _list.sort(it => it.supplyId)
      this.tableData = _list
      let typeIndex = 0
      _.forOwn(_.groupBy(_list, 'supplyId'), (v, k) => {

        v.forEach((it, i) => {
          if (i == 0) {
            this.$set(it, 'rowspan', v.length)
          } else {
            this.$set(it, 'rowspan', 0)
          }
          this.$set(it, 'typeIndex', typeIndex)
        })
        typeIndex++
      })
      return _list
    },
    clickDetail(row) {
      this.$router.push({
        path: '/page/oms/platformSync/sync_order_detail_wb', query: { id: row.id, }
      })
    },
    searchChange() {

    },

  }
};

</script>
<style></style>
